import React from 'react'

import './MainType.css'
import foods from '../../Static/img/foods.png'
import guoshu from '../../Static/img/guoshu.png'
import piano from '../../Static/img/piano.png'
import drink from '../../Static/img/drink.png'
import { NavLink } from 'react-router-dom'
class List extends React.Component {
    constructor() {
        super()
        this.state = {

        }
    }
    componentDidMount() {
        // let dom=document.getElementByClassName('type-li')
        // dom.addEventListener('click',this.gotoshoptype)
    }
    gotoshoptype(type) {
        this.props.history.push({
            pathname: '/Home/ShopDetails',
            state: {
                "sort_type_name": type,
            }
        })
    }

    render() {
        return (
            /* html */
            <div className='type-list'>
                <NavLink to='/Home/Food'> <img src={foods} alt="" /><span>美食</span></NavLink>
                <NavLink to='/Home/Fruits'><img src={guoshu} alt="" /><span>果蔬</span></NavLink>
                <NavLink to='/Home/Drug'><img src={piano} alt="" /><span>送药</span></NavLink>
                <NavLink to='/Home/Drink'><img src={drink} alt="" /><span>饮料</span></NavLink>
            </div>
        )
    }
}

export default List